<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>编辑用户</title>
    <link rel="stylesheet" th:href="@{/webjars/bootstrap/5.1.3/css/bootstrap.min.css}">
</head>
<body>
    <div class="container mt-4">
        <div class="card">
            <div class="card-header">
                <h2>编辑用户</h2>
            </div>
            <div class="card-body">
                <form id="editForm" class="mt-3">
                    <input type="hidden" id="id" name="id" th:value="${user.id}">
                    <div class="mb-3">
                        <label for="username" class="form-label">用户名</label>
                        <input type="text" class="form-control" id="username" name="username" 
                               th:value="${user.username}" required>
                    </div>
                    <div class="mb-3">
                        <label for="realName" class="form-label">姓名</label>
                        <input type="text" class="form-control" id="realName" name="realName" 
                               th:value="${user.realName}">
                    </div>
                    <div class="mb-3">
                        <label for="departmentId" class="form-label">部门</label>
                        <select class="form-select" id="departmentId" name="departmentId">
                            <option value="">请选择部门</option>
                            <option th:each="dept : ${departments}" 
                                    th:value="${dept.id}" 
                                    th:text="${dept.name}"
                                    th:selected="${dept.id == user.departmentId}"></option>
                        </select>
                    </div>
                    <div class="mb-3">
                        <label for="roleId" class="form-label">角色</label>
                        <select class="form-select" id="roleId" name="roleId">
                            <option value="">请选择角色</option>
                            <option th:each="role : ${roles}" 
                                    th:value="${role.id}" 
                                    th:text="${role.name}"
                                    th:selected="${role.id == user.roleId}"></option>
                        </select>
                    </div>
                    <div class="mb-3">
                        <label for="email" class="form-label">邮箱</label>
                        <input type="email" class="form-control" id="email" name="email" 
                               th:value="${user.email}">
                    </div>
                    <div class="mb-3">
                        <label for="phone" class="form-label">电话</label>
                        <input type="tel" class="form-control" id="phone" name="phone" 
                               th:value="${user.phone}">
                    </div>
                    <button type="submit" class="btn btn-primary">保存</button>
                    <a href="/user/list" class="btn btn-secondary">返回</a>
                </form>
            </div>
        </div>
    </div>

    <script th:src="@{/webjars/bootstrap/5.1.3/js/bootstrap.bundle.min.js}"></script>
    <script>
        document.getElementById('editForm').onsubmit = function(e) {
            e.preventDefault();
            const formData = new FormData(this);
            const data = Object.fromEntries(formData.entries());
            
            fetch('/user/edit', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/x-www-form-urlencoded'
                },
                body: new URLSearchParams(data)
            })
            .then(response => response.text())
            .then(result => {
                if (result === 'success') {
                    alert('更新成功');
                    window.location.href = '/user/list';
                } else {
                    alert('更新失败');
                }
            });
        };
    </script>
</body>
</html> 